{% extends "base.html.twig" %}
{% block title %}Registration
{% endblock %}
{% block head %}
	<link rel="stylesheet" href="../styles/userProfile.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script>
		$(document).ready(function () {
$('input[name=email]').keyup(function () {
var email = $(this).val();
console.log('email: ' + email);
// email = encodeURIComponent(email);
$('#emailTaken').load("isemailtaken/" + email);
});
});
	</script>
	{{ parent() }}
{% endblock %}

{% block content %}

    {% if success %}
		<div class="position-fixed top-0 end-0 p-3" style="z-index: 11">
			<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
				<div class="toast-header">
					<img src="../images/Logo.png" class="rounded me-5" alt="logo">
					<button type="button" class="btn-close  ms-5" data-bs-dismiss="toast" aria-label="Close"></button>
				</div>
				<div class="toast-body">
					<strong class="me-auto"> {{ success }}</strong>
				</div>
			</div>
		</div>
	{% endif %}

	{% if errors %}
		<div class="position-fixed top-0 end-0 p-3" style="z-index: 1000">
			<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
				<div class="toast-header">
					<img src="../images/Logo.png" class="rounded me-5" alt="logo">
					<button type="button" class="btn-close  ms-5" data-bs-dismiss="toast" aria-label="Close"></button>
				</div>
				<div class="toast-body">
				<strong class="me-auto">There was a problem...</strong>
					<ul>
						{% for error in errors %}
							<li>
								{{error}}
							</li>
						{% endfor %}
					</ul>
				</div>
			</div>
		</div>
	{% endif %}


    <div class="parallax-1">
		<div class="caption">
			<span class="border">
				{{user.first_name}}'s Profile
			</span>
		</div>
	</div>

	<section class="section p-5">

		<div class="container bg-light shadow-sm rounded-pill">

			<div class="row g-2 mt-5">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<h3 class="h3 card-title" id="exampleModalNavLabel">Client Details</h3>
						</div>
						<div class="modal-body">
							<p class="text-start">
								<button class="btn btn-lg logInButton" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFirstName" aria-expanded="false" aria-controls="collapseFirstName">Edit</button>
								First Name:
								<strong>{{ user.first_name }}</strong>
							</p>

							<div class="collapse" id="collapseFirstName">
								<form class="row g-2" name="first_name" method="post" enctype="multipart/form-data">
									<input class="form-control" type="hidden" name="user_id" value="{{ user.id }}">
									<div class="col-md">
										<div class="form-floating mb-3">
											<input type="text" class="form-control" id="floatingInputNameF" name="firstName" placeholder="Jane">
											<label for="floatingInputNameF">First Name:</label>
											<div class="redText">{{errors.firstName}}</div>
										</div>
									</div>
									<div class="col-auto text-center mt-3">
										<input class="btn btn-lg logInButton" type="submit" name="submit" value="Submit">
										<button class="btn btn-lg logInButton" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFirstName" aria-expanded="false" aria-controls="collapseFirstName">Cancel</button>
									</div>
								</form>
							</div>

							<p class="text-start">
								<button class="btn btn-lg logInButton" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLastName" aria-expanded="false" aria-controls="collapseLastName">Edit</button>
								Last Name:
								<strong>{{ user.last_name }}</strong>
							</p>


							<div class="collapse" id="collapseLastName">
								<form class="row g-2" name="lastName" method="post" enctype="multipart/form-data">
									<input class="form-control" type="hidden" name="user_id" value="{{ user.id }}">
									<div class="col-md">
										<div class="form-floating mb-3">
											<input type="text" class="form-control" id="floatingInputNameL" name="lastName" placeholder="Doe">
											<label for="floatingInputNameL">Last Name:</label>
											<div class="redText">{{errors.lastName}}</div>
										</div>
									</div>
									<div class="col-auto text-center mt-3">
										<input class="btn btn-lg logInButton" type="submit" name="submit" value="Submit">
										<button class="btn btn-lg logInButton" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLastName" aria-expanded="false" aria-controls="collapseLastName">Cancel</button>
									</div>
								</form>
							</div>

							<p class="text-start">
								<button class="btn btn-lg logInButton" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEmail" aria-expanded="false" aria-controls="collapseEmail">Edit</button>
								Email:
								<strong>{{ user.email }}</strong>
							</p>

							<div class="collapse" id="collapseEmail">
								<form class="row g-2" name="email" method="post" enctype="multipart/form-data">
									<input class="form-control" type="hidden" name="user_id" value="{{ user.id }}">
									<div class="col-md">
										<div class="form-floating mb-3">
											<input type="email" class="form-control" id="floatingInputEmail" name="email" placeholder="name@example.com" value="{{ v.email }}">
											<label for="floatingInputEmail">Email</label>
											<div id="emailTaken" class="redText">{{errors.email}}</div>
											<span id="emailTaken" name="emailTaken" class="redText"></span>
										</div>
									</div>
									<div class="col-auto text-center mt-3">
										<input class="btn btn-lg logInButton" type="submit" name="submit" value="Submit">
										<button class="btn btn-lg logInButton" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEmail" aria-expanded="false" aria-controls="collapseEmail">Cancel</button>
									</div>
								</form>
							</div>

							<p class="text-start">
								<button class="btn btn-lg logInButton" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePhoneNumber" aria-expanded="false" aria-controls="collapsePhoneNumber">Edit</button>
								Phone:
								<strong>{{ user.phone_number }}</strong>
							</p>

							<div class="collapse" id="collapsePhoneNumber">
								<form class="row g-2" name="phone" method="post" enctype="multipart/form-data">
									<input class="form-control" type="hidden" name="user_id" value="{{ user.id }}">
									<div class="col-md">
										<div class="form-floating mb-3">
											<input type="tel" class="form-control" id="floatingInputPhone" name="phone" placeholder="555-555-5555" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" value="{{ v.phone_number }}">
											<label for="floatingInputPhone">Phone (555-555-5555)</label>
											<div class="redText">{{errors.phone}}</div>
										</div>
									</div>
									<div class="col-auto text-center mt-3">
										<input class="btn btn-lg logInButton" type="submit" name="submit" value="Submit">
										<button class="btn btn-lg logInButton" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePhoneNumber" aria-expanded="false" aria-controls="collapsePhoneNumber">Cancel</button>
									</div>
								</form>
							</div>

						</div>
						<div class="modal-footer"></div>
					</div>
				</div>
			</div>

		</div>

	</section>

    <div class="parallax-1">
		
	</div>

    <script>
        window.onload = (event) => {
            let myAlert = document.querySelector('.toast');
            let bsAlert = new bootstrap.Toast(myAlert);
            bsAlert.show();
        }
    </script>
{% endblock %}
